<template>
	<div class="decorate-recoGoods" 
  :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <!-- 双列商品 -->
    <biserial-row-layout v-if="tplItemData.layout==1" :tplItemData="tplItemData" :recoGoods="true"></biserial-row-layout>
    <!-- 单列商品 -->
    <single-row-layout v-if="tplItemData.layout==2" :tplItemData="tplItemData" :recoGoods="true"></single-row-layout>
    <!-- 滑动商品 -->
    <slider-layout v-if="tplItemData.layout==3" :tplItemData="tplItemData" :recoGoods="true"></slider-layout>
  </div>
</template>

<script>
  import singleRowLayout from './singleRowLayout'
  import biserialRowLayout from './biserialRowLayout'
  import sliderLayout from './sliderLayout'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      singleRowLayout,
      biserialRowLayout,
      sliderLayout
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    created() {
      // console.log(this.tplItemData)
    }
  })
</script>

<style lang="scss">
.decorate-recoGoods{
  .biserial-goods-box{
    .multi-goods-item {
      border-radius: 12px;
      width: calc((100% - 20px)/2)!important;
      margin-bottom: 20px!important;
    }
  }
  .multi-row-goods .goods-info{
    padding: 10px 20px 20px!important;
    .title .seckill{
      background: linear-gradient(-90deg, #FE224E, #E90204)!important;
    }
  }
  .single-row-goods .goods-info .title .seckill{
    background: linear-gradient(-90deg, #FE224E, #E90204)!important;
  }
}
</style>
